<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<view class="block">
					<pure-progress :percent="percent"></pure-progress>
				</view>
			</pj-demo>

			<!-- 主题 -->
			<pj-demo title="主题">
				<view class="block">
					<pure-progress
						:percent="percent"
						theme="primary"
					></pure-progress>
					<pure-progress
						:percent="percent"
						theme="success"
					></pure-progress>
					<pure-progress
						:percent="percent"
						theme="warning"
					></pure-progress>
					<pure-progress
						:percent="percent"
						theme="danger"
					></pure-progress>
					<pure-progress
						:percent="percent"
						theme="info"
					></pure-progress>
				</view>
			</pj-demo>

			<!-- 自定义粗细 -->
			<pj-demo title="自定义粗细">
				<view class="block">
					<pure-progress
						:percent="percent"
						theme="primary"
						size="2px"
					></pure-progress>
					<pure-progress
						:percent="percent"
						theme="success"
						size="20px"
					></pure-progress>
				</view>
			</pj-demo>

			<!-- 自定义颜色 -->
			<pj-demo title="自定义颜色">
				<view class="block">
					<pure-progress
						:percent="percent"
						color="#9900ff"
					></pure-progress>
				</view>
				<view class="block">
					<pure-progress
						:percent="percent"
						color="linear-gradient(90deg, #9900ff 0%, #ff9900 100%)"
					></pure-progress>
				</view>
			</pj-demo>

			<!-- 自定义进度文字 -->
			<pj-demo title="自定义进度文字">
				<view class="block">
					<pure-progress
						:percent="percent"
						theme="primary"
						pivot-text="自定义文字"
					></pure-progress>
				</view>
			</pj-demo>

			<view class="buttons">
				<pure-button
					theme="primary"
					@onClick="handleAdd"
					>增加</pure-button
				>
				<pure-button
					theme="danger"
					@onClick="handleSubtract"
					>减少</pure-button
				>
			</view>
		</view>

		<pure-gap size="50px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 进度值
	const percent = ref(50);

	// 增加进度
	const handleAdd = () => {
		percent.value = Math.min(percent.value + 25, 100);
	};

	// 减少进度
	const handleSubtract = () => {
		percent.value = Math.max(percent.value - 25, 0);
	};
</script>

<style lang="scss" scoped>
	.block {
		padding: 30px 16px;
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	.buttons {
		font-size: var(--pure-font-size-small);
		display: flex;
		flex-direction: row;
		gap: 6px;
	}
</style>
